<template>
	<view class="setPassword_box_m">
		<u-form ref="setPassword_form" :model="form" class="setPassword_form" label-width="100rpx">
			<u-form-item style="text-align: center; margin-top: -25%; padding-right: 5%">
				<view style="font-size: 39rpx; font-weight: 500;">设置密码</view>
			</u-form-item>
			<u-form-item label="账号" prop="phone" class="input_style">
				<u-input type="number" placeholder="请输入手机号" v-model="form.phone" :border="true" :clearable="true">
				</u-input>
			</u-form-item>

			<u-form-item label="旧密码" prop="oldPassword" class="input_style">
				<u-input type="text" placeholder="请输入旧密码" v-model="form.oldPassword" :clearable="true"
					:password-icon="false" :border="true" :hold-keyboard="false"></u-input>
			</u-form-item>
			<u-form-item label="新密码" prop="newPassword" class="input_style">
				<u-input type="text" placeholder="请输入新密码" v-model="form.newPassword" :clearable="true"
					:password-icon="false" :border="true" :hold-keyboard="false"></u-input>
			</u-form-item>
			<u-button type="primary" style="width: 100% ;margin-top:10%" @click="submitForm('setPassword_form')">提 交
			</u-button>
			</u-form-item>
		</u-form>

		<view class="back_btn">
			<u-button type="primary" background="red" class="el-icon-refresh-left" size="mini"
				@click="navigateBack_fun">返回
			</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				form: {
					// phone: "15018488464",
					phone: "",
					// oldPassword: "123",
					oldPassword: "",
					newPassword: ''
				},
				rules: {
					phone: [{
							required: true,
							message: "请输入账号",
							trigger: "blur,change"
						},
						{
							min: 11,
							max: 15,
							message: "账号需要在 11 到 15 个字符",
							trigger: "blur,change",
						},
					],
					oldPassword: [{
							required: true,
							message: "请输入密码",
							trigger: "blur,change"
						},
						{
							min: 3,
							max: 15,
							message: "密码需要在 3 到 15 个字符",
							trigger: "blur,change",
						},
					],
					newPassword: [{
							required: true,
							message: "请输入密码",
							trigger: "blur,change"
						},
						{
							min: 3,
							max: 15,
							message: "密码需要设置在 3 到 15 个字符",
							trigger: "blur,change",
						},
						// {
						// 	// 自定义验证函数，见上说明
						// 	validator: (rule, value, callback) => {
						// 		return this.form.oldPassword == this.form.newPassword
						// 	},
						// 	message: '新旧密码不同',
						// 	// 触发器可以同时用blur和change
						// 	trigger: ['change', 'blur'],
						// }
					]
				},
				// 优化按钮
				btn_stats: {},
				// 修改时时验证账号密码是否正确的结果状态
				setPossword_state: false,
				token: '',
			}
		},
		created() {
			// 查看本地是否有手机号和密码
			uni.getStorageSync('phone') ? this.form.phone = uni.getStorageSync('phone') : null
			uni.getStorageSync('password') ? this.form.oldPassword = uni.getStorageSync('password') : null
		},
		onReady() {
			this.$refs.setPassword_form.setRules(this.rules)
		},
		methods: {
			submitForm(setPassword_form) {
				if (this.btn_stats.setPassword) {
					return
				}
				this.$refs.setPassword_form.validate(valid => {
					this.setPossword_state = valid
					console.log(this.setPossword_state)
				});
				if (!this.setPossword_state) {
					return uni.showToast({
						icon: 'none',
						title: "账号密码格式不正确"
					})
				}
				uni.showLoading({
					title: '正在修改密码...'
				});
				this.btn_stats.setPassword = true
				const then = this
				const urlPath = "user/changePassword";
				this.form.token = uni.getStorageSync("token")
				uni.request({
					method: 'POST',
					url: this.$serverURL + urlPath,
					// url: 'https://api.bingce.com:8091/user/changePassword',
					// url: 'http://api.bingce.com:8091/user/changePassword',
					// url: 'https://192.168.31.70:8080/user/changePassword',
					data: this.form,
					header: {},
					success(res) {
						console.log(res)
						switch (res.data.result) {
							case 1:
								// 跳转 login
								uni.navigateTo({
									url: "../index/index"
								})
								// 提示 token 过期
								return uni.showToast({
									icon: 'none',
									title: "token 已过期，请重新登录"
								})
								break;
							case 0:
								uni.navigateBack()
								// 提示修改成功
								uni.showToast({
									title: "设置成功"
								})
								// 重新设置token
								uni.setStorage({
									key: "token",
									data: res.data.token
								})
								break;
							case 109:
								return uni.showToast({
									icon: 'none',
									title: "原密码输入错误"
								})
								break;
							case 104:
								return uni.showToast({
									icon: 'none',
									title: "用户不存在"
								})
								break;
							default:
								console.log(res)
						}
					},
					fail(res) {
						console.log(res)
						uni.showToast({
							title: '设置失败，请稍后重试',
							icon: 'none',
							duration: 2000
						});
					},
					complete(res) {
						then.btn_stats.setPassword = false
					}
				})
			},
			navigateBack_fun() {
				uni.navigateBack()
			}

		}
	}
</script>

<style>
	.setPassword_box_m {
		width: 90%;
		height: 50%;
		background: #fff;
		border: 1px solid #ccc;
		border-radius: 2%;
		padding: 2%;
		margin: 25% auto;
	}

	.setPassword_form {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0rpx 15px;
		padding-bottom: 50rpx;
	}

	.back_btn {
		position: absolute;
		top: 10px;
		right: 10px;
	}
</style>
